<script setup lang="ts">

//onoffline 从pinia中获取socket状态
const onoffline = 0;
</script>

<template>
	<div>
	  <span
	    class="pointCircle"
	    :class="onoffline === 0?'offlinePointCircle offlinePointCircleAnimate':'onlinePointCircle onlinePointCircleAnimate'"
	  ></span>
	  <span
	    :class="onoffline === 0?'connectText offlineConnectText':'connectText onlineConnectText'"
	  >{{ onoffline === 0?'网络已断开':'网络已连接' }}</span>
	</div>
</template>


<style scoped lang="scss">
.offlinePointCircle {
  background-color: #f42a1f;
}
.onlinePointCircle {
  background-color: #36d236;
}
.pointCircle {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 4px;
  position: relative;
}
.connectText {
  padding-left: 6px;
  font-size: 16px;
}
.offlineConnectText {
  color: #f42a1f;
}
.onlineConnectText {
  color: #36d236;
}
.offlinePointCircleAnimate::before {
  background-color: rgba(250, 110, 110, 0.5);
}
.onlinePointCircleAnimate::before {
  background-color: rgba(130, 250, 130, 0.5);
}
.offlinePointCircleAnimate::before,
.onlinePointCircleAnimate::before {
  content: "";
  width: 16px;
  height: 16px;
  border-radius: 8px;
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -8px;
  margin-top: -8px;
  animation: onoffframe 1.5s ease-out 0s infinite;
}
@keyframes onoffframe {
  0% {
    transform: scale(0.5);
    opacity: 1;
  }

  30% {
    opacity: 1;
  }

  100% {
    transform: scale(1.5);
    opacity: 0;
  }
}

</style>
